<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--危废分类数据-->
            <el-col :span="4" :xs="24">
                <div class="head-container">
                    <el-input
                        v-model="wasteTypeName"
                        placeholder="请输入危废分类名称"
                        clearable
                        size="small"
                        prefix-icon="el-icon-search"
                        style="margin-bottom: 20px"
                    />
                </div>
                <div class="head-container">
                    <el-tree
                        :data="wasteTypeOptions"
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        ref="tree"
                        default-expand-all
                        @node-click="handleNodeClick"
                    />
                </div>
            </el-col>
            <!--危废数据-->
            <el-col :span="20" :xs="24">
                <el-form
                    :model="queryParams"
                    ref="queryForm"
                    :inline="true"
                    v-show="showSearch"
                    label-width="68px"
                >
                    <el-form-item label="危废名称" prop="wasteName">
                        <el-input
                            v-model="queryParams.wasteName"
                            placeholder="请输入危废名称"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="危废编码" prop="wasteCode">
                        <el-input
                            v-model="queryParams.wasteCode"
                            placeholder="请输入危废编码"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="包装形式" prop="packageType">
                        <el-select
                            v-model="queryParams.packageType"
                            placeholder="请选择包装形式"
                            clearable
                            size="small"
                        >
                            <el-option
                                v-for="dict in packageTypeOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="处置方式" prop="handlerMethod">
                        <el-select
                            v-model="queryParams.handlerMethod"
                            placeholder="请选择处置方式"
                            clearable
                            size="small"
                        >
                            <el-option
                                v-for="dict in handlerMethodOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="危废形态" prop="wasteShape">
                        <el-select
                            v-model="queryParams.wasteShape"
                            placeholder="请选择危废形态"
                            clearable
                            size="small"
                        >
                            <el-option
                                v-for="dict in wasteShapeOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="危险特性"
                        prop="hazardousCharacteristics"
                    >
                        <el-select
                            v-model="
                                queryParams.hazardousCharacteristicsFilterList
                            "
                            multiple
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="dict in hazardousCharacteristicsOptions"
                                :key="dict.dictValue"
                                :label="`${dict.dictLabel}(${dict.dictValue})`"
                                :value="dict.dictValue"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                            >搜索</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button
                            type="primary"
                            plain
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleAdd"
                            v-hasPermi="['system:user:add']"
                            >新增</el-button
                        >
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            type="success"
                            plain
                            icon="el-icon-edit"
                            size="mini"
                            :disabled="single"
                            @click="handleUpdate"
                            v-hasPermi="['system:user:edit']"
                            >修改</el-button
                        >
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            type="danger"
                            plain
                            icon="el-icon-delete"
                            size="mini"
                            :disabled="multiple"
                            @click="handleDelete"
                            v-hasPermi="['system:user:remove']"
                            >删除</el-button
                        >
                    </el-col>
                    <!-- <el-col :span="1.5">
                        <el-button
                            type="warning"
                            plain
                            icon="el-icon-download"
                            size="mini"
                            :loading="exportLoading"
                            @click="handleExport"
                            v-hasPermi="['system:user:export']"
                            >导出</el-button
                        >
                    </el-col> -->
                    <right-toolbar
                        :showSearch.sync="showSearch"
                        @queryTable="getList"
                        :columns="columns"
                    ></right-toolbar>
                </el-row>

                <el-table
                    v-loading="loading"
                    :data="wasteList"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                        type="selection"
                        width="55"
                        align="center"
                    />
                    <el-table-column
                        label="危废ID"
                        align="center"
                        prop="wasteId"
                        v-if="false"
                    />
                    <el-table-column
                        label="危废分类"
                        align="center"
                        prop="wasteTypeName"
                    />
                    <el-table-column
                        label="危废名称"
                        align="center"
                        prop="wasteName"
                    />
                    <el-table-column
                        label="危废编码"
                        align="center"
                        prop="wasteCode"
                    />
                    <el-table-column
                        label="包装形式"
                        align="center"
                        prop="packageType"
                        :formatter="packageTypeFormat"
                    />
                    <el-table-column
                        label="处置方式"
                        align="center"
                        prop="handlerMethod"
                        :formatter="handlerMethodFormat"
                    />
                    <el-table-column
                        label="危废形态"
                        align="center"
                        prop="wasteShape"
                        :formatter="wasteShapeFormat"
                    />
                    <el-table-column
                        label="危险特性"
                        align="center"
                        prop="hazardousCharacteristics"
                        :formatter="hazardousCharacteristicsFormat2"
                    />
                    <el-table-column
                        label="操作"
                        align="center"
                        class-name="small-padding fixed-width"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:wasteDetail:edit']"
                                >修改</el-button
                            >
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                                v-hasPermi="['system:wasteDetail:remove']"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />
            </el-col>
        </el-row>

        <!-- 添加或修改危废信息对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="600px"
            append-to-body
        >
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="危废分类" prop="wasteTypeId">
                            <treeselect
                                v-model="form.wasteTypeId"
                                :options="wasteTypeOptions"
                                :disable-branch-nodes="true"
                                :show-count="true"
                                placeholder="请选择所属分类"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="危废名称" prop="wasteName">
                            <el-input
                                v-model="form.wasteName"
                                placeholder="请输入危废名称"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="危废编码" prop="wasteCode">
                            <el-input
                                v-model="form.wasteCode"
                                placeholder="请输入危废编码"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="包装形式" prop="packageType">
                            <el-select
                                v-model="form.packageType"
                                placeholder="请选择包装形式"
                            >
                                <el-option
                                    v-for="dict in packageTypeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="处置方式" prop="handlerMethod">
                            <el-select
                                v-model="form.handlerMethod"
                                placeholder="请选择处置方式"
                            >
                                <el-option
                                    v-for="dict in handlerMethodOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="危废形态" prop="wasteShape">
                            <el-select
                                v-model="form.wasteShape"
                                placeholder="请选择危废形态"
                            >
                                <el-option
                                    v-for="dict in wasteShapeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="是否拆分" prop="canSplit">
                            <el-radio-group v-model="form.canSplit">
                                <el-radio
                                    v-for="dict in canSplitOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictValue"
                                    >{{ dict.dictLabel }}</el-radio
                                >
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否过磅" prop="needWeigh">
                            <el-radio-group v-model="form.needWeigh">
                                <el-radio
                                    v-for="dict in needWeighOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictValue"
                                    >{{ dict.dictLabel }}</el-radio
                                >
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item
                            label="危险特性"
                            prop="hazardousCharacteristics"
                        >
                            <el-select
                                v-model="form.hazardousCharacteristics"
                                multiple
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="dict in hazardousCharacteristicsOptions"
                                    :key="dict.dictValue"
                                    :label="`${dict.dictLabel}(${dict.dictValue})`"
                                    :value="dict.dictValue"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="安全措施" prop="securityMeasure">
                            <el-input
                                v-model="form.securityMeasure"
                                type="textarea"
                                placeholder="请输入内容"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input
                                v-model="form.remark"
                                type="textarea"
                                placeholder="请输入内容"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    :loading="buttonLoading"
                    type="primary"
                    @click="submitForm"
                    >确 定</el-button
                >
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    listWaste,
    getWasteDetail,
    delWaste,
    addWaste,
    updateWaste,
    exportWaste,
} from "@/api/system/waste/detail";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/waste/type";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "User",
    components: { Treeselect },
    data() {
        return {
            //按钮loading
            buttonLoading: false,
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 危废表格数据
            wasteList: null,
            // 弹出层标题
            title: "",
            // 危废分类树选项
            wasteTypeOptions: undefined,
            // 是否显示弹出层
            open: false,
            // 危废分类名称
            wasteTypeName: undefined,
            // 表单参数
            form: {},
            defaultProps: {
                children: "children",
                label: "label",
            },

            // 包装形式字典
            packageTypeOptions: [],
            // 处置方式字典
            handlerMethodOptions: [],
            // 危废形态字典
            wasteShapeOptions: [],
            // 是否需要过磅字典
            needWeighOptions: [],
            // 危险特性字典
            hazardousCharacteristicsOptions: [],
            // 是否可拆分字典
            canSplitOptions: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                wasteTypeId: undefined,
                wasteName: undefined,
                wasteCode: undefined,
                packageType: undefined,
                handlerMethod: undefined,
                wasteShape: undefined,
                hazardousCharacteristicsFilterList: [],
            },
            // 列信息
            columns: [
                // { key: 0, label: `用户编号`, visible: true },
                // { key: 1, label: `用户名称`, visible: true },
                // { key: 2, label: `用户昵称`, visible: true },
                // { key: 3, label: `部门`, visible: true },
                // { key: 4, label: `手机号码`, visible: true },
                // { key: 5, label: `状态`, visible: true },
                // { key: 6, label: `创建时间`, visible: true },
            ],
            // 表单校验
            rules: {
                wasteTypeId: [
                    {
                        required: true,
                        message: "危废分类不能为空",
                        trigger: "blur",
                    },
                ],
                wasteName: [
                    {
                        required: true,
                        message: "危废名称不能为空",
                        trigger: "blur",
                    },
                ],
                wasteCode: [
                    {
                        required: true,
                        message: "危废编码不能为空",
                        trigger: "blur",
                    },
                ],
                packageType: [
                    {
                        required: true,
                        message: "包装形式不能为空",
                        trigger: "blur",
                    },
                ],
                handlerMethod: [
                    {
                        required: true,
                        message: "处置方式不能为空",
                        trigger: "blur",
                    },
                ],
                wasteShape: [
                    {
                        required: true,
                        message: "危废形态不能为空",
                        trigger: "blur",
                    },
                ],
                hazardousCharacteristics: [
                    {
                        required: true,
                        message: "危险特性不能为空",
                        trigger: "blur",
                    },
                ],
                needWeigh: [
                    {
                        required: true,
                        message: "是否过磅不能为空",
                        trigger: "blur",
                    },
                ],
                canSplit: [
                    {
                        required: true,
                        message: "是否拆分不能为空",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    watch: {
        // 根据名称筛选危废分类树
        wasteTypeName(val) {
            this.$refs.tree.filter(val);
        },
    },
    created() {
        this.getList();
        this.getTreeselect();
        this.getDicts("waste_package_type").then((response) => {
            this.packageTypeOptions = response.data;
        });
        this.getDicts("waste_handler_method").then((response) => {
            this.handlerMethodOptions = response.data;
        });
        this.getDicts("waste_shape").then((response) => {
            this.wasteShapeOptions = response.data;
        });
        this.getDicts("sys_yes_no").then((response) => {
            this.needWeighOptions = response.data;
        });
        this.getDicts("waste_dangerous_characteristic").then((response) => {
            this.hazardousCharacteristicsOptions = response.data;
        });
        this.getDicts("sys_yes_no").then((response) => {
            this.canSplitOptions = response.data;
        });
    },
    methods: {
        /** 查询用户列表 */
        getList() {
            this.loading = true;
            listWaste(this.addDateRange(this.queryParams, this.dateRange)).then(
                (response) => {
                    this.wasteList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                }
            );
        },
        // 包装形式字典翻译
        packageTypeFormat(row, column) {
            return this.selectDictLabel(
                this.packageTypeOptions,
                row.packageType
            );
        },
        // 处置方式字典翻译
        handlerMethodFormat(row, column) {
            return this.selectDictLabel(
                this.handlerMethodOptions,
                row.handlerMethod
            );
        },
        // 危废形态字典翻译
        wasteShapeFormat(row, column) {
            return this.selectDictLabel(this.wasteShapeOptions, row.wasteShape);
        },
        // 是否需要过磅字典翻译
        needWeighFormat(row, column) {
            return this.selectDictLabel(this.needWeighOptions, row.needWeigh);
        },
        // 危险特性字典翻译
        hazardousCharacteristicsFormat2(row, column) {
            return this.selectDictLabels(
                this.hazardousCharacteristicsOptions,
                row.hazardousCharacteristics
            );
        },
        // 是否可拆分字典翻译
        statusFormat(row, column) {
            return this.selectDictLabel(this.canSplitOptions, row.status);
        },
        // 危险特性字典翻译
        hazardousCharacteristicsFormat(row, colum) {
            let resultStr = "";
            if (row.hazardousCharacteristics) {
                let formatList = row.hazardousCharacteristics.split(",");
                formatList = formatList.map((dictValue) =>
                    this.selectDictLabel(this.hazardousCharacteristicsOptions, dictValue)
                );
                resultStr = formatList.join("  ");
            }
            return resultStr;
        },
        /** 查询危废分类下拉树结构 */
        getTreeselect() {
            treeselect().then((response) => {
                this.wasteTypeOptions = response.data;
            });
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.wasteTypeId = data.id;
            this.getList();
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                wasteId: undefined,
                wasteTypeId: undefined,
                wasteName: undefined,
                wasteCode: undefined,
                packageType: undefined,
                handlerMethod: undefined,
                wasteShape: undefined,
                securityMeasure: undefined,
                needWeigh: "N",
                hazardousCharacteristics: [],
                canSplit: "N",
                delFlag: undefined,
                createBy: undefined,
                createTime: undefined,
                updateBy: undefined,
                updateTime: undefined,
                remark: undefined,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.hazardousCharacteristicsFilterList = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.wasteId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.getTreeselect();
            getWasteDetail().then((response) => {
                this.open = true;
                this.title = "添加危废信息";
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            this.getTreeselect();
            const wasteId = row.wasteId || this.ids;
            getWasteDetail(wasteId).then((response) => {
                this.form = response.data;
                if (this.form.hazardousCharacteristics) {
                    this.form.hazardousCharacteristics =
                        this.form.hazardousCharacteristics.split(",");
                }
                this.open = true;
                this.title = "修改危废信息";
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    this.form.hazardousCharacteristics =
                        this.form.hazardousCharacteristics.join(",");
                    if (this.form.wasteId != undefined) {
                        updateWaste(this.form).then((response) => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addWaste(this.form).then((response) => {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const wasteIds = row.wasteId || this.ids;
            this.$confirm(
                '是否确认删除危废编号为"' + wasteIds + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(function () {
                    return delWaste(wasteIds);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                })
                .catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出所有危废数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.exportLoading = true;
                    return exportWaste(queryParams);
                })
                .then((response) => {
                    this.download(response.msg);
                    this.exportLoading = false;
                })
                .catch(() => {});
        },

        /** 下载模板操作 */
        importTemplate() {
            importTemplate().then((response) => {
                this.download(response.msg);
            });
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.$alert(response.msg, "导入结果", {
                dangerouslyUseHTMLString: true,
            });
            this.getList();
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
    },
};
</script>
